{% extends 'base.html' %}

<!--头部样式-->
{% block head %}
<style>
    .user-center {
        margin: 50px 2px 107px 2px;
        height: 580px
    }

    .user-center-side {
        width: 200px;
        padding: 30px 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .user-center-content {
        width: 1050px;
        padding: 40px 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
</style>
{% endblock head %}


<!--登录信息替换-->
{% block login_info %}
<div>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 clearfix">
        <li class="nav-item" style="margin: 0 10px">
            <a class="nav-link" aria-current="page" href="{{url_for('admin.user_center')}}">管理中心</a>
        </li>
        <li class="nav-item" style="margin: 0 10px">
            <a class="nav-link" aria-current="page" href="#" data-bs-toggle="modal" data-bs-target="#staticBackdrop">欢迎你：豪哥</a>
        </li>
    </ul>
</div>
{% endblock login_info %}

<!--中间替换为编辑器-->
{% block bodyMiddle %}
<div class="d-flex align-items-start user-center">
    <div class="nav flex-column nav-pills me-xl-4 user-center-side" id="v-pills-tab" role="tablist"
         aria-orientation="vertical">
        <a class="nav-link" type="button" href="/posts/create"
           style="margin-bottom: 15px;background-color: #eaf2ff;color: #1e80ff;text-align: center">写文章</a>
        <button class="nav-link  active" id="v-pills-articles-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-first"
                type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i
                class="fa fa-home fa-lg" aria-hidden="true"></i>&nbsp;&nbsp;首页
        </button>
        <button class="nav-link" id="v-pills-favorite-tab" data-bs-toggle="pill"
                data-bs-target="#v-pills-favorite"
                type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">
            我的收藏
        </button>
        <button class="nav-link" id="v-pills-post-tab" data-bs-toggle="pill" data-bs-target="#v-pills-post"
                type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">发布文章
        </button>
        <button class="nav-link" id="v-pills-draft-tab" data-bs-toggle="pill" data-bs-target="#v-pills-draft"
                type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false">我的草稿
        </button>

        <button class="nav-link" id="v-pills-comments-tab" data-bs-toggle="pill" data-bs-target="#v-pills-comments"
                type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">我的评论
        </button>
        <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile"
                type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">个人资料
        </button>
        <button class="nav-link" id="v-pills-credits-tab" data-bs-toggle="pill" data-bs-target="#v-pills-credits"
                type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">我的积分
        </button>
    </div>
    <div class="tab-content user-center-content" id="v-pills-tabContent">
        <div class="tab-pane fade  show active" id="v-pills-first" role="tabpanel" aria-labelledby="v-pills-messages-tab"
             tabindex="0">首页文章统计、粉丝统计、点赞统计等
        </div>
        <div class="tab-pane fade" id="v-pills-favorite" role="tabpanel"
             aria-labelledby="v-pills-home-tab"
             tabindex="0">

            <table class="table">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>@social</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane fade" id="v-pills-post" role="tabpanel" aria-labelledby="v-pills-profile-tab"
             tabindex="0">
        </div>
        <div class="tab-pane fade" id="v-pills-draft" role="tabpanel" aria-labelledby="v-pills-disabled-tab"
             tabindex="0">...
        </div>
        <div class="tab-pane fade" id="v-pills-comments" role="tabpanel" aria-labelledby="v-pills-settings-tab"
             tabindex="0">...
        </div>
        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-settings-tab"
             tabindex="0">...
        </div>
        <div class="tab-pane fade" id="v-pills-credits" role="tabpanel" aria-labelledby="v-pills-settings-tab"
             tabindex="0">...
        </div>
    </div>
</div>

{% endblock bodyMiddle %}



